<template>
	<view class="content bg-default">
		<DishDetail
			class="bg-white"
			:name="dish.name"
			:type="dish.dishType"
			:desc="dish.description"
			:score="dish.score"
			:count="dish.scorecount"
			:image="dish.imageurl"
		/>
		<view class="divider"></view>
		<view v-if="isEmployee">
			<!-- 评论 role > 0 才显示-->
			<CommentEditor
				v-if="canComment"
				@submit="handleCreateComment"
			></CommentEditor>
			<!-- 已评论 role > 0 才显示-->
			<view
				class="had-comment bg-white"
				v-else
			>
				<!-- <view class="comment-count">已评价{{ commentCount }}次</view> -->
				<view class="comment-count">已评价</view>
				<view
					class="comment-checker"
					@click="navigateToMyCommentsPage"
				>
					查看我的评价
				</view>
			</view>
		</view>
		<view
			class="had-comment bg-white"
			v-else
		>
			<view class="comment-count">游客不能评价哦</view>
			<view
				class="comment-checker"
				@click="navigateToLoginPage"
			>
				登录
			</view>
		</view>

		<view class="space"></view>

		<CommentCard
			v-for="item in comments"
			:key="item.id"
			:score="item.score"
			:date="item.createTime"
			:comment="item.comment"
			:liked-count="item.thumbs"
			:liked="item.like"
			@liked="() => handleLiked(item.id)"
		/>
	</view>
</template>

<script>
import { useUserStore } from '@/stores/user.js';
import { getDishByDishId } from '@/apis/dish.js';
import { allowCommentByDishIdUserId, getCommentsByDishIdUserId, reqCreateComment, reqLikeComment } from '@/apis/comment.js';
// 获取菜品，获取评论，是否可评论

export default {
	data() {
		return {
			userId: '',
			dishId: '',
			userStore: useUserStore(),
			dish: {
				id: 1,
				name: ' ',
				typeName: ' ',
				dishTypeId: 0,
				description: ' ',
				imageUrl: '',
				score: 0,
				scoreCount: 0,
			},

			// 运行评论：一个菜一天只能评论一次
			canComment: false,
			// 以往评论次数
			commentCount: 0,

			comments: [],
		};
	},
	computed: {
		isEmployee() {
			// console.log('isEmployee', this.userStore?.role >= 1);
			return this.userStore?.role >= 1;
		},
		enabledComment() {},
	},
	onLoad(e) {
		console.log('评论 onload', e);
		this.dishId = e.dishId;
		this.userId = useUserStore().id;
		// console.log('comments onLoad', this.dishId, this.userId);

		if (this.dishId) {
			this.initData();
		}
	},
	methods: {
		initData() {
			this.getDishDetail();
			this.allowComment();
			this.getComments();
		},
		// 允许评论
		allowComment() {
			allowCommentByDishIdUserId({
				userId: this.userId,
				dishId: this.dishId,
			}).then((res) => {
				this.canComment = res.data?.canComment || false;
				this.commentCount = res.data?.commentCount || 0;
			});
		},
		// 根据菜品ID获取所有评论
		getComments() {
			getCommentsByDishIdUserId({
				userId: this.userId,
				dishId: this.dishId,
			}).then((data) => {
				console.log('根据菜品ID获取所有评论', data);
				this.comments = data;
			});
		},
		// 获取菜品ID菜品信息
		getDishDetail() {
			getDishByDishId(this.dishId).then((res) => {
				console.log('getDishByDishId', res);
				this.dish = res;
			});
		},
		handleCreateComment(e) {
			// console.log('create comment', e);
			if (!this.userId || !this.dishId || !e.score) {
				uni.showToast({
					title: '还没有打分',
					icon: 'none',
				});
				return;
			}
			uni.showLoading({
				title: '',
			});
			reqCreateComment({
				userId: this.userId,
				dishId: this.dishId,
				score: e.score,
				comment: e.comment,
			})
				.then((res) => {
					// 评论成功，更新评论和状态
					this.allowComment();
					this.getComments();
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		handleLiked(commentId) {
			// console.log('点赞', commentId, this.userId);
			// return;
			reqLikeComment({
				userId: this.userId,
				commentId: commentId,
			}).then((res) => {
				// console.log('handleLiked', res);
				uni.showToast({
					title: res.message,
					icon: 'success',
				});
				// 更新评论
				this.getComments();
			});
		},
		navigateToMyCommentsPage() {
			uni.navigateTo({
				// 带上userId dishId
				url: '../../pages/my-comments/my-comments?dishId=' + this.dishId,
			});
		},
		navigateToLoginPage() {
			useUserStore().saveUser({
				id: -1,
				role: 0,
			});
			uni.redirectTo({
				url: '/pages/login/login',
			});
		},
	},
};
</script>

<style scoped>
.space {
	height: 24rpx;
}

.had-comment {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16rpx;

	padding: 48rpx;
	/* font-size: 14px; */
}
.comment-count {
	color: #696969;
}
.comment-checker {
	color: #0062cf;
}
</style>
